<template>
  <div v-loading="formLoading" class="w-400px" style="padding-bottom: 300px">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120">
      <el-form-item label="账号" prop="userAccount">
        <el-input :maxlength="16" v-model="formData.userAccount" placeholder="请输入登录账号" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactPhone">
        <el-input :maxlength="11" v-model="formData.contactPhone" placeholder="请输入联系人电话" />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="flex">
          <el-input v-model="formData.code" :maxlength="6" placeholder="请输入验证码" />
          <el-button :disabled="isCode" type="primary" @click="getCode" style="margin-left: 12px">{{
            validMess
          }}</el-button>
        </div>
      </el-form-item>
    </el-form>
    <footer style="padding-top: 30px">
      <el-button :disabled="formLoading" type="primary" @click="submitForm" class="w-full"
        >查询</el-button
      >
    </footer>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import * as register from '@/api/register'

const formRef = ref()
const { t } = useI18n()
const message = useMessage()
const formLoading = ref(false)
const router = useRouter()
const formData = ref({
  userAccount: undefined,
  contactPhone: undefined,
  code: undefined
})
let isCode = ref(false)
let countNum = ref(59)
let intervalId = null as any
const validMess = ref('获取验证码')

const valiAccount = (rule, accout, callback) => {
  if (/^[a-zA-Z0-9]{6,16}$/.test(accout)) {
    callback()
  } else {
    callback(new Error('账号必须满足6-16位数字或字母组合的字符串'))
  }
}

const isValidPhoneNumber = (rule, phone, callback) => {
  if (/^1\d{10}$/.test(phone)) {
    callback()
  } else {
    callback(new Error('手机号码不正确'))
  }
}

const countNumFun = () => {
  if (countNum.value == 0) {
    clearInterval(intervalId)
    isCode.value = false
    countNum.value = 59
    validMess.value = '获取验证码'
    return
  }
  countNum.value -= 1
  isCode.value = true
  validMess.value = countNum.value + '秒'
}

const formRules = {
  userAccount: [
    { required: true, message: '登录账号不能为空', trigger: 'blur' },
    { validator: valiAccount, trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '联系人电话不能为空', trigger: 'blur' },
    { validator: isValidPhoneNumber, trigger: 'blur' }
  ],
  code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
}
const emit = defineEmits(['success'])

const getCode = async () => {
  if (!formData.value.contactPhone) {
    message.warning(t('warn.noPhone'))
    return
  }
  try {
    formLoading.value = true
    const res = await register.sendSmsCode({
      mobile: formData.value.contactPhone,
      scene: 5
    })
    if (res) {
      ElNotification({
        title: '验证码信息',
        dangerouslyUseHTMLString: true,
        duration: 10000,
        message: res
      })
    }
    message.success(t('common.sendSuccess'))
    validMess.value = countNum.value + '秒'
    intervalId = setInterval(() => {
      countNumFun()
    }, 1000)
  } finally {
    formLoading.value = false
  }
}

const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    const data = await register.getProcess(formData.value)
    router.push({ name: 'queryProgress', query: { type: 'result', status: data } })
  } finally {
    formLoading.value = false
  }
}
</script>
